<template>
  <show-container title="">
    <Card dis-hover :bordered="false">
      <p slot="title">Add Role</p>
      <Form
        :style="{ width: '520px' }"
        :rules="formRules"
        :model="formItem"
        ref="formItem"
        :label-width="180"
      >
        <FormItem label="RoleName" prop="roleName">
          <Input v-model="formItem.roleName" placeholder="Role Name"></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" :loading="loading" @click="handleAdd"
            >Save</Button
          >
        </FormItem>
      </Form>
    </Card>
  </show-container>
</template>
<script>
/**
 * 新增角色
 */
import { addRole } from "@/api/role.js";
import { AddPageMixin } from "@/mixins/ListMixins.js";
export default {
  mixins: [AddPageMixin],
  data() {
    return {
      formItem: { roleName: "" },
      loading: false,
      formRules: {
        roleName: [{ required: true, message: "required", trigger: "blur" }]
      }
    };
  },

  methods: {
    handleAdd() {
      this.$refs.formItem.validate(valid => {
        if (valid) {
          addRole(this.formItem)
            .then(() => {
              this.$Message.success("Success");
              this.triggerRefresh();
              this.$closePage();
            })
            .catch(message => {
              this.$Message.error(message);
            });
        }
      });
    }
  }
};
</script>
